import React, { useState, createContext } from 'react';
import classNames from 'classnames';
import './_style.scss';
import type { MenuItemProps } from './menuItem';
import type { SubMenuProps } from './subMenu';

/**
 * Menu 上下文接口 - 用于在菜单组件之间共享状态
 * 通过 React Context 实现组件间的状态传递，避免 props 层层传递
 */
interface MenuContextProps {
  /** 当前激活的菜单项索引 */
  activeIndex?: string;
  /** 菜单项选择回调函数 */
  onSelect?: (index: string) => void;
  /** 菜单模式：水平或垂直 */
  mode?: 'horizontal' | 'vertical';
  /** 默认展开的子菜单索引数组 */
  defaultOpenSubMenus?: string[];
}

/**
 * Menu 上下文对象
 * 为 Menu、MenuItem、SubMenu 组件提供共享的状态和方法
 */
export const MenuContext = createContext<MenuContextProps>({});

/**
 * Menu 组件属性接口
 */
export interface MenuProps {
  /** 默认选中的菜单项索引 */
  defaultIndex?: string;
  /** 自定义 CSS 类名 */
  className?: string;
  /** 菜单布局模式：水平或垂直 */
  mode?: 'horizontal' | 'vertical';
  /** 自定义样式对象 */
  style?: React.CSSProperties;
  /** 菜单项选择时的回调函数 */
  onSelect?: (selectedIndex: string) => void;
  /** 默认展开的子菜单索引数组 */
  defaultOpenSubMenus?: string[];
  /** 子组件，通常是 MenuItem 或 SubMenu */
  children?: React.ReactNode;
}





/**
 * Menu 组件 - 导航菜单主容器
 * 负责管理整个菜单的状态和提供上下文给子组件
 */
export const Menu: React.FC<MenuProps> = (props) => {
  // 解构 props，设置默认值
  const {
    className,
    mode = 'horizontal', // 默认水平模式
    style,
    children,
    defaultIndex = '0', // 默认选中第一个菜单项
    onSelect,
    defaultOpenSubMenus = [], // 默认不展开任何子菜单
  } = props;

  // 状态管理：当前激活的菜单项索引
  const [activeIndex, setActiveIndex] = useState(defaultIndex);

  // 动态生成 CSS 类名
  const classes = classNames('menu', className, {
    'menu-vertical': mode === 'vertical',   // 垂直模式类名
    'menu-horizontal': mode === 'horizontal', // 水平模式类名
  });

  /**
   * 处理菜单项点击事件
   * @param index - 被点击的菜单项索引
   */
  const handleClick = (index: string) => {
    setActiveIndex(index); // 更新内部状态
    if (onSelect) {
      onSelect(index); // 调用外部回调函数
    }
  };

  // 传递给子组件的上下文对象
  const passedContext: MenuContextProps = {
    activeIndex,
    onSelect: handleClick,
    mode,
    defaultOpenSubMenus,
  };

  /**
   * 渲染子组件，自动为没有索引的子组件分配索引
   */
  const renderChildren = () => {
    return React.Children.map(children, (child, index) => {
      const childElement = child as React.FunctionComponentElement<MenuItemProps | SubMenuProps>;
      const { displayName } = childElement.type;
      
      // 只处理 MenuItem 和 SubMenu 组件
      if (displayName === 'MenuItem' || displayName === 'SubMenu') {
        // 为子组件自动分配索引（如果未提供）
        return React.cloneElement(childElement, {
          index: childElement.props.index || index.toString(),
        });
      } else {
        console.error('Warning: Menu has a child which is not a MenuItem or SubMenu component');
      }
    });
  };

  return (
    <ul className={classes} style={style} data-testid="test-menu">
      {/* 提供上下文给所有子组件 */}
      <MenuContext.Provider value={passedContext}>
        {renderChildren()}
      </MenuContext.Provider>
    </ul>
  );
};

// 设置组件显示名称，便于调试
Menu.displayName = 'Menu';
